<template>
  <div class="content">
    <div ref="charts" style="width: 1000px; height: 800px"></div>
  </div>
</template>


<script>
import jiangsu from '../assets/jiangsu.json'; //引入json文件
import nantong from '../assets/nantong.json'; //引入json文件

export default {
  created() {
    this.$nextTick(() => {
      this.initCharts();
    })
  },
  methods: {
    initCharts() {
      const charts = this.$charts.init(this.$refs["charts"]);

      console.log(this.$charts);
      console.log(charts);
      const option = {
        // 背景颜色
        backgroundColor: "#404a59",
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: "item",
          alwaysShowContent: false,
          backgroundColor: "#0C121C",
          borderColor: "rgba(0, 0, 0, 0.16);",
          hideDelay: 100,
          triggerOn: "mousemove",
          enterable: true,
          textStyle: {
            color: "#DADADA",
            fontSize: "12",
            width: 20,
            height: 30,
            overflow: "break",
          },
          showDelay: 100,
          formatter(params) {
            return `地区：${params.name}</br>数值：${params.value[2]}`;
          }
        },
        // 地图配置
        geo: {
          map: "JS",
          label: {
            // 通常状态下的样式
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0,
            },
          },
        },
        // 地图颜色比例尺
        visualMap: {
          left: 'right',
          min: 0,
          max: 5000,
          inRange: {
            color: [
              '#313695',
              '#4575b4',
              '#74add1',
              '#abd9e9',
              '#e0f3f8',
              '#ffffbf',
              '#fee090',
              '#fdae61',
              '#f46d43',
              '#d73027',
              '#a50026'
            ]
          },
          text: ['High', 'Low'],
          calculable: true
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "pin",
            legendHoverLink: true,
            symbolSize: [60, 60],
            // 这里渲染标志里的内容以及样式
            label: {
              show: true,
              formatter(value) {
                return value.data.value[2];
              },
              color: "#fff",
            },
            // 标志的样式
            itemStyle: {
              normal: {
                color: "rgba(255,0,0,.7)",
                shadowBlur: 2,
                shadowColor: "D8BC37",
              },
            },
            // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
            // 至于如何展示，完全是靠上面的formatter来自己定义的
            data: [
              { name: "南通市", value: [120.88, 31.98, 4000] },
            ],
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            zlevel: 1,
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            effectType: "ripple",
            showEffectOn: "render",
            rippleEffect: {
              period: 10,
              scale: 10,
              brushType: "fill",
            },

            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: "rgba(255, 235, 59, .7)",
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            zlevel: 1,
            data: [
              { name: "南京市", value: [118.78, 32.07, 5000] },
            ],
          },
          //区域根据数量填充颜色
          // {
          //   name: 'JS Estimates',
          //   type: 'map',
          //   roam: true,
          //   map: 'JS',
          //   emphasis: {
          //     label: {
          //       show: true
          //     }
          //   },
          //   data: [
          //     { name: '南京市', value: 1007 },
          //     { name: "南通市", value: 2333 },
          //     { name: "徐州市", value: 150 },
          //     { name: "泰州市", value: 488 },
          //     { name: "苏州市", value: 4223 },
          //     { name: "连云港市", value: 1456 },
          //     { name: "宿迁市", value: 654 },
          //     { name: "盐城市", value: 3456 },
          //     { name: "淮安市", value: 13 },
          //     { name: "扬州市", value: 267 },
          //     { name: "镇江市", value: 3213 },
          //     { name: "常州市", value: 1234 },
          //     { name: "无锡市", value: 1456 },
          //   ]
          // }
        ],
        graphic: {
          // 水印类型
          type: 'text',
          // 相对于容器的位置
          left: '10%',
          top: '10%',
          // 样式设置
          style: {
            // 文本内容
            text: "江苏省风险分布",
            // 字体粗细、大小、字体
            font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
            // 字体颜色
            fill: "#fff"
          }
        }
      };
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      this.$charts.registerMap("JS", jiangsu)
      charts.setOption(option);
      // 注意这里是echarts的实例对象，而不是echarts组件本身。
      charts.on('click', ({ name }) => {
        console.log(name);
        if (name === "南通市") {
          // 修改option的配置，可以继续自定义
          option.geo.zoom = 0.8
          // 就像上面提到的，这里必须要和注册地图时的名字一致
          option.geo.map = "nt"
          // 注册地图
          this.$charts.registerMap("nt", nantong)
          // 重新渲染
          charts.setOption(option, true)
        }
      })
    },
  },
};
</script>

